<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="./package/style.css">
	<style>
		body{
			margin: 0;
		}
		#app{
			display: flex;
			flex-direction: row;
			overflow: hidden;
		}
		iframe{
			flex-grow: 1;
		}
	</style>
</head>
<body>
	<div id="app">
		<!-- <zi-loading  v-show="isLoading" v-on:click="Message.warn('1')" :fixed="false"></zi-loading> -->
		<div style="width: 200px;height: 100vh;">
			<zi-dir @open="openDir" :data="data"></zi-dir>
		</div>
		<iframe :src="src" frameborder="0"></iframe>
	</div>
	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	<script type="module">
		import {Message} from "./package/main.js"
		import zj from "./package/main.js"
		console.log("zj:",zj);
		Message({
			title:"123",
			time:10
		})
		const { createApp } = Vue
		console.log("createApp:",createApp);

		const app=createApp({
			data() {
				return {
					isLoading:true,
					message: 'Hello Vue!',
					Message,
					data:[],
					src:""
				}
			},
			mounted(){
				fetch("./files.json").then(res=>{
					return res.json()
				}).then(json=>{
					console.log("json:",json);
					this.data=json
				})
			},
			methods:{
				openDir(e){
					console.log("e:",e);
					this.src=e
				}
			}
		})
		app.use(zj)
		app.mount('#app')
	</script>
</body>
</html>